<template>
  <div id="DetailBaseInfo" v-if="Object.keys(goods).length !== 0" class="base-info">
    <div class="info-title">{{goods.title}}</div>
    <div class="info-price">
      <span class="n-price">{{goods.newPrice}}</span>
      <span class="o-price">{{goods.oldPrice}}</span>
      <span class="discount" v-if="goods.discount">{{goods.discount}}</span>
    </div>
    <!-- {{goods}} -->
    <div class="info-other">
      <span>{{goods.colums[0]}}</span>
      <span>{{goods.colums[1]}}</span>
      <span>{{goods.service[goods.service.length-1].name}}</span>
    </div>
    <div class="info-service">
      <span class="info-service-item" v-for="(item,index) in goods.service" :key="index">
        <img :src="item.icon" alt="">
        <span>{{item.name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name:"DetailBaseInfo",
  props:{
    goods:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
  return {}
  },
  computed: {
    
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
</style>